import { Card, Row, Col, Progress } from 'antd'

const Users: React.FC = () => {
  return (
    <Card title="累计用户数" size="small" style={{ height: '200px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '8px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: '24px', marginBottom: '0' }}>
          ¥1,087,503
        </div>
        <Row style={{ marginTop: 8 }}>
          <Col span={24}>
            <Progress percent={80} size="small" strokeColor="#52c41a" />
          </Col>
        </Row>
        <div style={{ borderTop: '1px solid #e8e8e8', paddingTop: '8px', marginBottom: 'auto', marginTop: "32px" }}></div>
        <div style={{ fontSize: '12px', color: '#999' }}>
          <span>日同比 <span style={{ color: 'black', fontWeight: 'bold' }}>8.73%</span></span>
          <span style={{ margin: '0 8px' }}> </span>
          <span>月同比 <span style={{ color: 'black', fontWeight: 'bold' }}>38.73%</span></span>
        </div>
      </div>
    </Card>
  );
};

export default Users;



// import React from 'react'
// import { Card, Row, Col, Progress } from 'antd'
// import { ArrowUpOutlined } from '@ant-design/icons'

// export default function TotalUsers() {
//   return (
//     <Card style={{ borderRadius: 12, backgroundColor: '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.06)', border: 'none' }}>
//       <Row>
//         <Col span={24}>
//           <div style={{ fontSize: 14, color: '#8c8c8c', marginBottom: 8 }}>累计用户数</div>
//           <div style={{ fontSize: 24, color: '#3f8600', fontWeight: 'bold' }}>¥ 1,087,503</div>
//         </Col>
//       </Row>
//       <Row style={{ marginTop: 8 }}>
//         <Col span={24}>
//           <Progress percent={80} size="small" strokeColor="#52c41a" />
//         </Col>
//       </Row>
//       <Row style={{ marginTop: 8 }}>
//         <Col span={12}>
//           <div style={{ fontSize: 12, color: '#8c8c8c' }}>
//             日同比 <span style={{ color: '#3f8600', marginLeft: 5 }}>8.73%</span>
//           </div>
//           <div style={{ fontSize: 12, color: '#8c8c8c', marginTop: 4 }}>
//             月同比 <span style={{ color: '#3f8600', marginLeft: 5 }}>38.73%</span>
//             <ArrowUpOutlined style={{ fontSize: 10, color: '#3f8600', marginLeft: 2 }} />
//           </div>
//         </Col>
//         <Col span={12} style={{ textAlign: 'right' }}>
//           <ArrowUpOutlined style={{ fontSize: 14, color: '#3f8600' }} />
//         </Col>
//       </Row>
//     </Card>
//   )
// }